<template>
	<view>
		<navbar title="签到打卡" :autoBack="true">
			<view class="" slot="rightbtn">
				<u-button @click="navto('/pages/tool/signrecord')" color="#3262FD"
					:customStyle='{width:"131rpx",height:"51rpx",marginTop:0,padding:0,borderRadius:"5rpx",fontSize:"24rpx"}'>签到记录</u-button>
			</view>
		</navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con">
				<view class="con__box">
					<view class="con__box__map" @click="clickmap">
						<view class="u-flex u-flex-xy-center">
							<image src="/static/tool/dingwei.png" class="con__box__map__icon" mode=""></image>
							<view class="con__box__map__addrname u-line-1">
								{{addrname}}
							</view>
							<image src="/static/homex/more2.png" style="height: 30rpx;" mode="heightFix"></image>
						</view>
						<view class="con__box__map__addr" v-if="addr">
							{{addr}}
						</view>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							客户
						</view>
						<view class="con__box__item__inp" @click="navto('/pages/customer/choice')">
							<view class="con__box__item__inp__timelabel" v-if="!customername">
								请选择
							</view>
							<view class="con__box__item__inp__time" v-else>
								{{customername}}
							</view>
						</view>
						<image src="/static/homex/more2.png" class="con__box__item__m" mode="aspectFill"></image>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							事件
						</view>
						<view class="con__box__item__inp" @click="clicksj">
							<view class="con__box__item__inp__timelabel" v-if="!form.event">
								请选择
							</view>
							<view class="con__box__item__inp__time" v-else>
								{{form.event}}
							</view>
						</view>
						<image src="/static/homex/more2.png" class="con__box__item__m" mode="aspectFill"></image>
					</view>
					<view class="con__box__item">
						<view class="con__box__item__label">
							图片
						</view>
						<view class="con__box__item__inp" @click="upavatar">
							<image src="/static/tool/uppic.png" v-if="!form.images" class="con__box__item__inp__up"
								mode=""></image>
							<image :src="URL(form.images)" v-else class="con__box__item__inp__up" mode="aspectFill">
							</image>
						</view>
					</view>
					<view class="con__box__ti">
						<view class="con__box__ti__line">

						</view>
						备注
					</view>
					<view class="" style="padding-right: 30rpx;">
						<u--textarea :showConfirmBar='false' v-model="form.remark" placeholder="请输入备注内容" height='140rpx'
							border='none'></u--textarea>
					</view>
				</view>
				<view class="con__footer">
					<view class="con__footer__bbox" hover-class="u-hover-class" @click="sign">
						<view class="con__footer__box">
							<view class="con__footer__box__text">
								签到
							</view>
							<view class="con__footer__box__time">
								{{$u.timeFormat(time, 'hh:MM')}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-picker :show="show" keyName='name' @close='show=false' @cancel='show=false' closeOnClickOverlay
			:columns="columns" :loading='loading' @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	
	const uniMapCo = uniCloud.importObject('uni-map-co')
	import {
		wgs84togcj02
	} from "@/utils/toGCj.js"
	import sale from '@/api/_sale.js'
	export default {

		data() {
			return {
				value1: '',
				key: '6b765ca8c07252883b12d69db2248fe1',
				addrname: '正在定位',
				addr: '',
				customername: '',
				form: {
					"customer_id": "",
					"images": "",
					"remark": "",
					"address": "",
					lat: '', //维度
					lng: '', //经度
					event: ''
				},
				show: false,
				columns: [],
				loading: false,
				time: new Date(),
				timer: null,
				defaultIndex: [],
				loadingbtn: false
			};
		},
		onLoad() {
			let _this = this

			this.timer = setInterval(() => {
				_this.time = new Date()
			}, 30 * 1000)
		},
		methods: {
			clickmap() {
				this.navto('/pages/tool/map?latitude='+this.form.lat+'&longitude='+this.form.lng)
			},
			async getaddr(latitude, longitude) {
				// 调用API
				let result = await uniMapCo.location2address({
					location: latitude + "," + longitude,
					get_poi: 1,
					poi_options: {
						radius: 100,
						address_format: 'short'
					}
				});
				let res = result.result.result
				this.addr = res.formatted_addresses
				this.addrname = res.pois[0].title
				this.form.lat = latitude
				this.form.lng = longitude
				console.log("result", result.result.result.formatted_addresses);
			},
			async clicksj() {
				this.show = true
				this.loading = true
				this.columns = []
				let res = await sale.eventList()
				if (res.data.code == 1) {
					this.loading = false
					this.columns.push(res.data.data)
				}
			},
			async sign() {
				let _this = this
				if (this.loadingbtn) {
					return
				}
				this.form.address = this.addrname
				let {
					address,
					customer_id,
					remark,
					images,
					event,
					lat,
					lng
				} = this.form
				if (!address) {
					uni.$u.toast('地址获取失败，稍后重试')
					return
				}
				if (!customer_id) {
					uni.$u.toast('请选择客户')
					return
				}
				if (!images) {
					uni.$u.toast('请上传图片')
					return
				}
				if (!event) {
					uni.$u.toast('请选择事件')
					return
				}
				this.loadingbtn = true
				let res = await sale.signIn(this.form)
				if (res.data.code == 1) {
					uni.$u.toast('签到成功')
					this.$store.commit('setcustomer', null)
					this.$store.commit('setaddr', null)
					setTimeout(() => {
						_this.loadingbtn = false
						uni.redirectTo({
							url: '/pages/tool/signrecord'
						})
					}, 1000)
				} else {
					_this.loadingbtn = false
					uni.$u.toast('签到失败')
				}
			},
			confirm(e) {
				this.show = false
				// console.log(e)
				this.form.event = e.value[0].name
				this.defaultIndex = e.indexs
			},
			upavatar() {
				let _this = this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '上传中'
						})
						uni.uploadFile({
							url: 'http://dn.fuliaoxx.com/api/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							header: {
								token: uni.getStorageSync('dktoken') || ''
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data)
								uni.hideLoading()
								if (res.code == 1) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
									_this.form.images = res.data.url
								} else if (res.code == 401) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index/login'
										})
									}, 2000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							},
							fail() {
								uni.$u.toast('上传失败')
								uni.hideLoading()
							}
						});
					}
				});
			}
		},
		onShow() {
			let _this = this
			if (this.$store.state.curcustomer) {
				this.form.customer_id = this.$store.state.curcustomer.id
				this.customername = this.$store.state.curcustomer.username
			}
			if (this.$store.state.curaddr) {
				this.getaddr(this.$store.state.curaddr.latlng.lat, this.$store.state.curaddr.latlng.lng)
			} else {
				// uni.showLoading({
				// 	title: '获取中'
				// })
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						uni.hideLoading()
						let jwd = wgs84togcj02(res.longitude, res.latitude)
						_this.getaddr(jwd[1],jwd[0] )
					},
					fail: (err) => {
						uni.hideLoading()
						uni.showToast({
							title: '请开启手机定位',
							icon: 'none'
						});
					}
				});



				// uni.getLocation({
				// 	type: 'gcj02', //设置type为gcj02
				// 	isHighAccuracy: true,
				// 	geocode:true,
				// 	success: function(res) {
				// 		// console.log(res)
				// 		_this.getaddr(res.latitude, res.longitude)
				// 	},
				// 	fail(err) {
				// 		uni.$u.toast('定位失败，请稍后重试')
				// 		// console.log(err)
				// 	},
				// 	complete(e) {

				// 	}
				// });
			}
		},
		onUnload() {
			clearInterval(this.timer)
			this.$store.commit('setaddr', null)
			this.$store.commit('setcustomer', null)
		},
		// onBackPress() {
		// 	clearInterval(this.timer)
		// 	this.$store.commit('setaddr',null)
		// 	this.$store.commit('setcustomer',null)
		// }
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		padding: 20rpx 30rpx 100rpx;

		&__box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 42rpx 0 42rpx 22rpx;

			&__map {
				width: 620rpx;
				background: #A6E8F3;
				border-radius: 20rpx;
				margin: 0 0 0 13rpx;
				height: 233rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&__icon {
					width: 50rpx;
					height: 50rpx;
				}

				&__addrname {
					font-size: 40rpx;
					color: #333;
					font-weight: bold;
					margin: 0 20rpx;
					max-width: 450rpx;
					text-align: center;
				}

				&__addr {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					text-align: center;
					width: 450rpx;
				}
			}

			&__item {
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 32rpx;
				border-bottom: 2rpx solid #F9F9F9;

				&__label {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #6D6D6D;
					line-height: 26rpx;
				}

				&__m {
					width: 12rpx;
					height: 21rpx;
					margin-left: 10rpx;
				}

				&__inp {
					flex: 1;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #020202;
					line-height: 38rpx;
					text-align: right;

					.uni-input-placeholder {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #6D6D6D;
						line-height: 38rpx;
					}

					&__timelabel {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #6D6D6D;
						line-height: 38rpx;
					}

					&__up {
						width: 75rpx;
						height: 75rpx;
					}
				}
			}

			&__ti {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #1E1E1E;
				line-height: 26rpx;
				display: flex;
				align-items: center;
				padding: 35rpx 0 30rpx;
				padding-left: 10rpx;

				&__line {
					width: 6rpx;
					height: 24rpx;
					background: #3262FD;
					margin-right: 10rpx;
				}
			}

		}

		&__footer {
			display: flex;
			justify-content: center;
			margin-top: 80rpx;

			&__bbox {
				width: 216rpx;
				height: 216rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(50, 98, 253, 0.33);
				border-radius: 50%;
			}

			&__box {
				width: 180rpx;
				height: 180rpx;
				background: linear-gradient(167deg, #0588F8, #3262FD);
				border-radius: 50%;
				// border: 18rpx solid rgba(50, 98, 253, 0.33);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				&__text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #FBFBFB;
					line-height: 30rpx;
					margin-bottom: 16rpx;
				}

				&__time {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 40rpx;
					color: #FBFBFB;
					line-height: 40rpx;
				}
			}
		}
	}

	::v-deep.u-textarea {
		padding: 40rpx;
		background-color: rgba(237, 237, 241, .5);

		border-radius: 20rpx;

		.u-textarea__field {
			font-size: 26rpx;
			color: #020202;
		}

		.uni-textarea-placeholder {
			color: #939393 !important;
		}
	}
</style>